<template>
  <div class="flex-auto over-hidden">
    <listLayout>
      <template #title>附件列表</template>
      <template #form>
        <div>
          <el-button @click="handlUpload">上传附件</el-button>
          <!-- <el-button>删除用户</el-button> -->
        </div>

        <el-form :inline="true" @submit.native.prevent="handleFormSubmit">
          <el-form-item label="附件类型" prop="region">
            <el-select v-model="formData.tags" placeholder="请选择附件类型" clearable @change="handleFormSubmit">
              <el-option v-for="(it, i) of attachmentTypes" :key="i" :value="it.className"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="formData.filenameKeyword" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item><el-button icon="el-icon-search" native-type="submit"></el-button></el-form-item>
        </el-form>
      </template>

      <template #table>
        <el-table :data="tableData" :loading="tableLoading" height="580px">
          <el-table-column prop="originalFilename" label="文件名" >
            <template slot-scope="scope">
              <a
                target="_blank" 
                :href="fileUrlParse(scope.row.storagePath)" 
                :download="scope.row.originalFilename"
                @click="handleDownload($event, scope.row)"
              >
                {{ scope.row.originalFilename }}
              </a>
            </template>
          </el-table-column>
          <el-table-column prop="size" label="大小" width="">
            <template slot-scope="scope">
              <span>{{ formatFileSize(scope.row.size) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="tags" label="分类"></el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button style="margin-right: 20px" type="text" @click="handleSetTags(scope.row)">设置分类</el-button>
              <el-popconfirm
                icon="el-icon-info"
                icon-color="red"
                title="确定删除吗？"
                @confirm="handleTableRowDelete(scope.row)"
              >
                <el-button slot="reference" type="text">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination mt40">
          <el-pagination
            background
            layout="prev, pager, next, sizes, total"
            :total="pagination.total"
            :page-sizes="[10, 20, 30, 40]"
            :current-page="formData.page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </template>
    </listLayout>

    <el-dialog title="上传附件" width="500px" top="5%" :visible.sync="dialogVisibleUpload">
      <UploadFile :attachmentTypes="attachmentTypes" @upload-success="handleUploadSuccess" />
    </el-dialog>

    <el-dialog title="设置分类" width="400px" top="5%" :visible.sync="dialogVisibleTags">
      <TagesForm :attachmentTypes="attachmentTypes" :formData="curEditItem" @sure="handleDialogTagsSure" @cancel="handleDialogTagsCancel" />
    </el-dialog>
  </div>
</template>

<script>
import listLayout from '@/components/listLayout/listLayout.vue'
import UploadFile from '@/components/UploadFile/UploadFile.vue'
import TagesForm from './TagsFrom.vue'
// data
import { createAttachmentTypes } from './create'
import service from './service'
// utils
import { getStorageUserId } from '@/utils/profile'
import { formatFileSize, getFileExtension, fileUrlParse, OmitFileExtension, triggerDownload } from '@/utils/file'
export default {
  name: 'AttachmentTable',

  mixins: [service],

  components: { listLayout, UploadFile, TagesForm },

  data() {
    return {
      formData: {
        filenameKeyword: '',
        // tags: createAttachmentTypes()[0].label,
        tags: '',
        page: 1,
        size: 10
      },

      attachmentTypes: createAttachmentTypes(),

      tableData: [],
      tableLoading: false,
      curEditItem: {},

      dialogVisibleUpload: false,
      dialogVisibleTags: false,

      pagination: {
        total: 0
      }
    }
  },

  methods: {
    formatFileSize,
    getFileExtension,
    fileUrlParse,
    OmitFileExtension,

    handlUpload() {
      this.dialogVisibleUpload = true
    },

    handleUploadSuccess() {
      this.dialogVisibleUpload = false
      this.handleFormSubmit()
    },

    handleFormSubmit(e) {
      // console.log("handleFormSubmit", { ...this.formData });
      if (e && e.type === 'submit') {
        this.formData.page = 1
      }
      this.getFiles(getStorageUserId(), this.formData)
    },

    handleDownload(e, item) {
      // console.log(item);
      e.preventDefault()
      triggerDownload(this.fileUrlParse(item.storagePath), item.originalFilename)
    },
    handleSetTags(row) {
      // console.log('handleSetTags', row)
      this.dialogVisibleTags = true
      this.curEditItem = row
    },
    handleDialogTagsSure(data) {
      // console.log('handleDialogTagsSure', data)
      this.modifyCates(data.id, { newTags: data.tags })
      this.handleDialogTagsCancel()
    },
    handleDialogTagsCancel() {
      this.curEditItem = {}
      this.dialogVisibleTags = false
    },

    handleTableRowDelete(row) {
      // console.log(row);
      this.removeFile(row.id)
    },

    handleSizeChange(size) {
      this.formData.size = size
      this.handleFormSubmit()
    },

    handleCurrentChange(page) {
      this.formData.page = page
      this.handleFormSubmit()
    },
  },

  mounted() {
    this.handleFormSubmit()
    this.getAllCates({ userId: getStorageUserId() })
  }
}
</script>

<style lang="less" scoped>
/deep/ .list-filter {
  display: flex;
  justify-content: space-between;
}
</style>
